{% extends "layout.html" %}
{% block title %}设置{% endblock %}
{% block content %}
	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">新增配置</h3>
	  </div>
	  <div class="panel-body">
	    <form class="form-horizontal" id="settingForm" action="/settings" method="POST">
	    	<input type="hidden" name="id" id="settingsId" value="0">
	      <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">配置名称</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="itemName" id="itemName" placeholder="配置名称">
		      <p class="help-block">配置名称一旦创建不能修改。</p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">数据库地址</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="dbHost" id="dbHost" placeholder="数据库地址">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">端口</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="dbPort" id="dbPort" placeholder="端口" value="3306">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">数据库名</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="dbName" id="dbName" placeholder="数据库名">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="dbUserName" id="dbUserName" placeholder="用户名">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" name="dbPwd" id="dbPwd" placeholder="密码">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-default btn-success"><i class="glyphicon glyphicon-ok-sign"></i> 保 存</button>
		      &nbsp;
		      <button type="button" class="btn btn-default btn-default" id="clear">清 除</button>
		    </div>
		  </div>
		</form>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">配置列表</h3>
	  </div>
	  <div class="panel-body">
	    <table class="table table-bordered table-striped">
	    	<colgroup>
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    		<col class="col-xs-1">
	    	</colgroup>
	    	<thead>
	    		<tr>
	    			<th>配置名称</th>
	    			<th>数据库地址</th>
	    			<th>端口</th>
	    			<th>数据库名</th>
	    			<th>用户名</th>
	    			<th>创建时间</th>
	    			<th>操作</th>
	    		</tr>
	    	</thead>
	    	<tbody>
	    		{% if dbinfos %}
	    		{% for dbinfo in dbinfos %}
	    		<tr>
	    			<th scope="row">{{dbinfo.item_name}}</th>
	    			<td>{{dbinfo.db_host}}</td>
	    			<td>{{dbinfo.db_port}}</td>
	    			<td>{{dbinfo.db_name}}</td>
	    			<td>{{dbinfo.db_user}}</td>
	    			<td>{{dbinfo.create_time}}</td>
	    			<td>
	    				<a href="javascript:;" class="edit-settings" data-setting="{{dbinfo.id}}">编辑</a>&nbsp;&nbsp;
	    				<a href="javascript:;" class="del-settings" data-setting="{{dbinfo.id}}">删除</a>
	    			</td>
	    		</tr>
	    		{% endfor %}
	    		{% endif %}
	    	</tbody>
	    </table>
	  </div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="deleteSettingsModal" tabindex="-1" role="dialog" aria-labelledby="deleteSettingsModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="deleteSettingsModalLabel">温馨提示</h4>
	      </div>
	      <div class="modal-body">
	        你确定要删除“<span id="modalItemName"></span>”数据库配置吗？
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
	        <button type="button" class="btn btn-primary" id="deleteSettingsBtn" onclick="enterDeleteSettings()">确 定</button>
	      </div>
	    </div>
	  </div>
	</div>
{% endblock %}
{% block javascript %}
	<script type="text/javascript">
		$(function(){
			$("#settingForm").bootstrapValidator({
				message: 'This value is not valid',
	            feedbackIcons: {
	                valid: 'glyphicon glyphicon-ok',
	                invalid: 'glyphicon glyphicon-remove',
	                validating: 'glyphicon glyphicon-refresh'
	            },
	            fields: {
	            	itemName: {
		                validators: {
		                    notEmpty: {
		                        message: 'The setting name is required and cannot be empty'
		                    },
		                    remote: {
		                        url: '/validate/item/name',
		                        message: 'The itemName is not available'
		                    }
		                }
		            },
	                dbHost: {
	                    validators: {
	                        notEmpty: {
	                            message: 'The database host is required and cannot be empty'
	                        }
	                    }
	                },
	                dbPort: {
	                    validators: {
	                        notEmpty: {
	                            message: 'The database port is required and cannot be empty'
	                        },
	                        integer: {
	                            message: 'The database port is not an integer'
	                        }
	                    }
	                },
	                dbName: {
	                    validators: {
	                        notEmpty: {
	                            message: 'The database name is required and cannot be empty'
	                        }
	                    }
	                },
	                dbUserName: {
	                    validators: {
	                        notEmpty: {
	                            message: 'The database user name is required and cannot be empty'
	                        }
	                    }
	                },
	                dbPwd: {
	                    validators: {
	                        notEmpty: {
	                            message: 'The database password is required and cannot be empty'
	                        }
	                    }
	                }
	            }
			});
			$(".edit-settings").click(function(){
				$('#settingForm').data('bootstrapValidator').resetForm(true);

				var settingId = $(this).data("setting");
				var settingInfo = $(this).parent().siblings();
				$("#settingsId").val(settingId);
				$("#itemName").val($(settingInfo.get(0)).text());
				$("#itemName").attr('readonly','readonly');
				$("#dbHost").val($(settingInfo.get(1)).text());
				$("#dbPort").val($(settingInfo.get(2)).text());
				$("#dbName").val($(settingInfo.get(3)).text());
				$("#dbUserName").val($(settingInfo.get(4)).text());

				$('#settingForm').data('bootstrapValidator').enableFieldValidators('itemName', false);
			});
			/* 清除填写 */
			$("#clear").click(function(){
				$('#settingForm').data('bootstrapValidator').resetForm(true);
				$("#settingsId").val(0);
				$("#itemName").removeAttr('readonly');
				$("#dbPort").val(3306);

				$('#settingForm').data('bootstrapValidator').enableFieldValidators('itemName', true);
			});

			$(".del-settings").click(function(){
				var dbInfoId = $(this).data("setting");
				var itemName = $(this).parent().siblings('th').text();
				$("#modalItemName").text(itemName);
				$("#deleteSettingsBtn").data("setting", dbInfoId);
				$('#deleteSettingsModal').modal('show');
			});

			window.enterDeleteSettings = function(){
				var dbInfoId = $("#deleteSettingsBtn").data("setting");
				console.log(dbInfoId);
				$('#deleteSettingsModal').modal('hide');

				$.ajax({
				   type: "GET",
				   dataType: "json",
				   url: "/settings/" + dbInfoId + "/del",
				   success: function(result, textStatus, jqXHR){
				     if(result.success) {
				     	location.href="/settings"
				     } else {
				     	console.error("删除错误！");
				     }
				   },
				   error:function(XMLHttpRequest, textStatus, errorThrown){
				   	 console.log(errorThrown);
				   }
				});
			}
		});
	</script>
{% endblock %}